<template>
  <div class="dialog-box">
    <el-dialog
      class="dialog"
      v-model="visible"
      top="80px"
      draggable
      overflow
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="task-conatinar">
        <div class="header-box">
          <div class="title">外卖订单详情</div>
          <div class="close-btn" @click="closeDiglog">关闭</div>
        </div>
        <div class="pd-box">
          <div class="info-box">
            <div class="flex-bwt">
              <div class="left-box">
                <div class="item-flex">
                  <div class="label">订单单号：</div>
                  <div class="value">{{ orderTake.orderBatchCode }}</div>
                </div>
                <div class="item-flex">
                  <div class="label">下单时间：</div>
                  <div class="value">{{ orderTake.arriveTime }}</div>
                </div>
                <div class="item-flex">
                  <div class="label">姓名：</div>
                  <div class="value">{{ orderTake.contacts }}</div>
                </div>
                <div class="item-flex">
                  <div class="label">备注：</div>
                  <div class="value">{{ orderTake.remark }}</div>
                </div>
              </div>
              <div class="center-box">
                <div class="item-flex">
                  <div class="label">配送方式：</div>
                  <div class="value">{{ orderTake.logistic }}</div>
                </div>
                <div class="item-flex">
                  <div class="label">送达时间：</div>
                  <div class="value">{{ orderTake.remark }}</div>
                </div>
                <div class="item-flex">
                  <div class="label">电话：</div>
                  <div class="value">{{ orderTake.mobile }}</div>
                </div>
              </div>
              <div class="right-box">
                <div class="item-flex">
                  <div class="label">订单状态：</div>
                  <div class="value" style="color: #ff6a00">{{ orderTake.status }}</div>
                </div>
                <div class="item-flex">
                  <div class="label">地址：</div>
                  <div class="value">
                    {{ orderTake.address }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="product-box">
            <div class="left-box">
              <div class="header-box">
                <div class="item-tit" style="width: 40%">商品名称</div>
                <div class="item-tit" style="width: 25%">数量（单位）</div>
                <div class="item-tit" style="width: 20%">单价</div>
                <div class="item-tit" style="width: 25%">金额</div>
              </div>
              <div class="table-content">
                <div class="th-item" style="width: 40%">
                  金锣火腿肠大肠包小肠...
                  <div class="add-text">加冰、少糖</div>
                </div>
                <div class="th-item" style="width: 25%">2（份）</div>
                <div class="th-item" style="width: 20%">25.00</div>
                <div class="th-item" style="width: 25%">50.00</div>
              </div>
              <!-- 套餐 -->
              <div class="table-content">
                <div class="product-tc" style="width: 40%">
                  <div class="tc-tit">
                    <span class="tabbq">套餐</span>
                    金锣火腿肠大肠包小 肠优惠肠中肠套餐...
                  </div>
                  <div class="item-name">大火腿肠*2</div>
                  <div class="item-name">大火腿肠*2</div>
                  <div class="item-name">大火腿肠*2</div>
                  <div class="item-name">大火腿肠*2</div>
                  <div class="item-name">大火腿肠*2</div>
                </div>
                <div class="th-item" style="width: 25%">2（份）</div>
                <div class="th-item" style="width: 20%">25.00</div>
                <div class="th-item" style="width: 25%">50.00</div>
              </div>
            </div>
            <div class="right-box">
              <div class="top-box">
                <div class="price-title">
                  总金额：<span class="text" style="color: #ff3333"
                    >￥320.00</span
                  >
                </div>
                <div class="flex-box">
                  <div class="box1">
                    <div class="product-item">
                      <div class="price-label">优惠总金额：</div>
                      <div class="price-value" style="color: #ff3333">
                        ￥100.00
                      </div>
                    </div>
                    <div class="product-item" style="margin-top: 12px">
                      <div class="price-label" style="color: #999999">
                        优惠卷：
                      </div>
                      <div class="price-value" style="color: #999999">
                        ￥100.00
                      </div>
                    </div>
                  </div>
                  <div class="box2">
                    <div class="product-item">
                      <div class="price-label">其他金额：</div>
                      <div class="price-value" style="color: #ff6a00">
                        ￥100.00
                      </div>
                    </div>
                    <div class="product-item" style="margin-top: 12px">
                      <div class="price-label" style="color: #999999">
                        配送费：
                      </div>
                      <div class="price-value" style="color: #999999">
                        ￥100.00
                      </div>
                    </div>
                    <div class="product-item" style="margin-top: 12px">
                      <div class="price-label" style="color: #999999">
                        打包费：
                      </div>
                      <div class="price-value" style="color: #999999">
                        ￥100.00
                      </div>
                    </div>
                  </div>
                  <div class="box3">
                    <div class="product-item">
                      <div class="price-label">收款金额：</div>
                      <div class="price-value" style="color: #0acc6b">
                        ￥100.00
                      </div>
                    </div>
                    <div class="product-item" style="margin-top: 12px">
                      <div class="price-label" style="color: #999999">
                        会员卡：
                      </div>
                      <div class="price-value" style="color: #999999">
                        ￥100.00
                      </div>
                    </div>
                    <div class="product-item" style="margin-top: 12px">
                      <div class="price-label" style="color: #999999">
                        微信：
                      </div>
                      <div class="price-value" style="color: #999999">
                        ￥100.00
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="bottom-box">
                <div class="zf-title">支付记录</div>
                <div class="zf-header">
                  <div class="zf-item" style="width: 40%">
                    结账单号：028732024041200051
                  </div>
                  <div class="zf-item" style="width: 15%">支付金额</div>
                  <div class="zf-item" style="width: 10%">支付方式</div>
                  <div class="zf-item" style="width: 35%">支付流水号</div>
                </div>
                <div class="tr-box">
                  <div class="tr-item" style="width: 40%">
                    支付时间：2024-02-18 15:40:12
                  </div>
                  <div class="tr-item" style="width: 15%">100.00</div>
                  <div class="tr-item" style="width: 10%">会员卡</div>
                  <div class="tr-item" style="width: 35%">
                    4200002146202404200597305910
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="footer-box">
        <el-button class="cancel" @click="handleCancel">取消订单</el-button>
        <el-button class="submit" @click="handleSubmit">补打配送单</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script setup>
import Api from "@/api";
const props = defineProps({
  visible: {
    type: Boolean,
    required: false,
  },
  taskId:{
    type: String,
    required: false,
  }
});
const visible = toRef(props, "visible");

// 取消
const emit = defineEmits(["emitCancel", "emitSubmit"]);
const handleCancel = (params) => {
  emit("emitCancel", "cancel");
};
// 确认
const handleSubmit = (params) => {
  emit("emitSubmit", "Submit");
};

const closeDiglog = () => {
     emit("emitClose", "cancel");
};

const orderTake = ref({}) //顶部详情
const tableShowList = ref([]); //商品名称
//获取外卖详情顶部
const get_cancel_options = (params) => {
  if(props.taskId) {
    Api.Common.PcObjProcess.Do({ "functionName": "GetTakeOutInfo", "orgCode": "0004", "contentData": { orderBatchCode: props.taskId } }).then(res => {
        console.log('获取外卖详情顶部 res :>> ', res);
        orderTake.value = res.Table[0]
    })

    getTableList()
  }
}

const tableShowListForm = ref({
    // 获取表格数据参数
    consumeCode: props.taskId,
    payBatchCode: "",
    state: "1",
    pageSize: 4,
    pageIndex: 1,
});

//获取商品名称列表
const getTableList = (flag) => {
    if (flag) {
        tableShowListForm.value.pageIndex = 1;
    }
    console.log(tableShowListForm.value);
    Api.Common.PcObjProcess.Do({
        functionName: "GetPayBatchGoodsList",
        contentData: tableShowListForm.value,
    }).then((res) => {
        tableShowList.value = res.result[0].consumeList;
        console.log(res,'获取商品名称列表');
    });
};


//获取商品金额
const payStatistics = ref({});
const disAmt = ref({});
const otherAmt = ref({});
const collectAmt = ref({});
const getPayStatistics = () => {
    Api.Common.PcObjProcess.Do({
        functionName: "GetPayStatistics",
        contentData: {
            consumeCode: consumeCode.value,
            payBatchCode: toolPayBatchCode.value,
        },
    }).then((res) => {
        console.log(res);
        console.log(11);
        payStatistics.value = res;
        if (res.disAmt) {
            disAmt.value = res.disAmt;
        }
        if (res.otherAmt) {
            otherAmt.value = res.otherAmt;
        }
        if (res.collectAmt) {
            collectAmt.value = res.collectAmt;
        }
    });
};

// 获取买单支付记录
const orderPayList = ref([]);
const getPayList = () => {
    Api.Common.PcObjProcess.Do({
        functionName: "GetPayBatchPayRecord",
        contentData: {
            consumeCode: consumeCode.value,
            payBatchCode: toolPayBatchCode.value,
        },
    }).then((res) => {
        console.log(res);
        orderPayList.value = res.result;
    });
};


onMounted(() => {
    get_cancel_options()
})

</script>
  
<style  lang="scss" scoped>
.dialog-box {
  ::v-deep {
    .el-dialog {
      width: 1460px;
      // height: 400px;
      border-radius: 16px;
      // padding-left: 60px;
      // padding-right: 60px;
      // padding-bottom: 40px;
      padding: 0 !important;
      background: #f7f7f7;
    }
    .el-dialog__header {
      display: none;
    }
    .el-dialog__title {
      font-weight: bold;
      font-size: 20px;
      color: #212121;
      line-height: 36px;
      // padding-left: 60px;
    }

    .el-divider {
      margin: 0;
    }

    .el-form-item__label {
      font-size: 16px;
      color: #212121;
    }
  }

  .footer-box {
    margin-top: 20px;
    padding: 0 540px;
    padding-left: 570px;
    width: 300px;
    display: flex;
    padding-bottom: 20px;
    .cancel {
      width: 160px;
      height: 60px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #ff6a00;
      font-size: 24px;
      color: #ff6a00;
      margin-right: 10px;
    }

    .submit {
      width: 160px;
      height: 60px;
      background: #ff6a00;
      border-radius: 8px;
      font-size: 24px;
      color: #ffffff;
      margin-left: 30px;
    }
  }

  .task-conatinar {
    .header-box {
      position: relative;
      border-radius: 16px 16px 0 0;
      height: 88px;
      text-align: center;
      line-height: 88px;
      background: #f7f7f7;
      .title {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 20px;
        color: #212121;
      }
      .close-btn {
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 40px;
        width: 100px;
        height: 48px;
        background: #cccccc;
        border-radius: 8px;
        text-align: center;
        line-height: 48px;
        font-weight: 400;
        font-size: 18px;
        color: #212121;
      }
    }
    .pd-box {
      padding: 0 40px 0px 40px;
    }
    .info-box {
      padding: 24px;
      width: 100%;
      background: #fff;
      border-radius: 8px;
      .flex-bwt {
        display: flex;
        width: 1200px;
        justify-content: space-between;
      }
      .item-flex {
        display: flex;
        margin-bottom: 20px;
        .label {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 18px;
          color: #212121;
        }
        .value {
          font-family: Microsoft YaHei;
          font-weight: 700;
          font-size: 18px;
          color: #212121;
        }
      }
      .item-flex:nth-last-child(1) {
        margin-bottom: 0;
      }
    }
    .product-box {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .left-box {
        width: 660px;
        height: 480px;
        border-radius: 8px;
        border: 1px solid #ffd400;
        background: #fff;
        .header-box {
          display: flex;
          height: 60px;
          line-height: 60px;
          text-align: left;
          background: #fff4bf;
          border-radius: 8px 8px 0px 0px;
          padding: 0 40px;
          .item-tit {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #212121;
          }
        }
        .table-content {
          display: flex;
          text-align: left;
          padding: 20px 40px;
          border-bottom: 1px solid #e6e6e6;
          .th-item {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #212121;
            .add-text {
              text-align: left;
              font-weight: 500;
              font-size: 12px;
              color: #999999;
            }
          }
        }
        .product-tc {
          .tc-tit {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            flex-wrap: wrap;
            color: #212121;
            word-wrap: break-word; /* 防止长单词溢出容器 */
            overflow-wrap: break-word; /* 确保文本在长单词处换行 */
            white-space: normal; /* 默认换行 */
            margin-bottom: 10px;
            .tabbq {
              width: 50px;
              height: 20px;
              background: #ff3333;
              border-radius: 4px;
              text-align: center;
              line-height: 20px;
              font-size: 14px;
              color: #fff;
            }
          }
          .item-name {
            position: relative;
            font-weight: 500;
            font-size: 12px;
            color: #666666;
            padding-left: 10px;
            margin-bottom: 5px;
          }
          .item-name::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            width: 6px;
            height: 6px;
            background: #ff6a00;
            border-radius: 50%;
          }
        }
      }
      .right-box {
        .top-box {
          padding: 20px;
          width: 680px;
          height: 220px;
          background: #ffffff;
          border-radius: 8px;
          margin-bottom: 40px;
          .price-title {
            font-weight: bold;
            font-size: 16px;
            color: #212121;
            margin-bottom: 19px;
          }
          .flex-box {
            width: 560px;
            display: flex;
            justify-content: space-between;
            .box1 {
              width: 160px;
            }
          }
        }
        .bottom-box {
          padding: 20px;
          width: 680px;
          height: 220px;
          background: #ffffff;
          border-radius: 8px;
          .zf-title {
            font-weight: bold;
            font-size: 16px;
            color: #212121;
            margin-bottom: 19px;
          }
          .zf-header {
            display: flex;
            margin-bottom: 12px;
            .zf-item {
              text-align: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #212121;
            }
          }
          .tr-box {
            margin-bottom: 10px;
            display: flex;
            .tr-item {
              text-align: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #999999;
            }
          }
        }
      }
    }
  }
}
.product-item {
  display: flex;
  .price-label {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
  }
  .price-value {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
  }
}
</style>
  